<script setup>
  import {
    navigateBack,
  } from "@/assets/scripts/navigate.js"
  import {
    rechargeRecordListApi,
  } from '@/assets/api/other/recharge.js'
  import {
    onMounted,
    ref
  } from "vue";
  const rechargeRecordList = ref([])

  onMounted(() => {
    rechargeRecordList_init() // 充值记录
  })

  const handleMore = () => {
    if (loading.value) return
    loading.value = true
    pageNum.value = pageNum.value + 1
    rechargeRecordList_init() // 请求记录数据
  }


  const rechargeRecordList_init = async () => {
    const user = uni.getStorageSync('user')
    if (!user) return
    const res = await rechargeRecordListApi(user.userId)
    if (res.code === 200) {
      total.value = res.total
      const rows = res.total <= (pageNum.value - 1) * 10 ? [] : res.rows
      rechargeRecordList.value = [...rechargeRecordList.value.slice(0, (pageNum.value - 1) * 10), ...rows]
      loading.value = false
    }
  }
</script>

<template>
  <uv-navbar :fixed="false" bgColor="#f5f5f5" @leftClick="navigateBack" title="积分记录">
  </uv-navbar>

  <uv-row class="px-normal pt-normal" v-if="!rechargeRecordList.length">
    <uv-col class="bg-grey border-r">
      <view class="p-normal ">
        <uv-empty mode="list"></uv-empty>
      </view>
    </uv-col>
  </uv-row>

  <view class="p-normal">
    <view class="bg-grey mb-normal border-r" v-for="(item, index) in rechargeRecordList" :key="index">
      <view class="p-normal d-flex d-flex-aic">
        <view class="d-flex-fx1">
          <view class="d-flex d-flex-aic d-flex-jcsb">
            <view class="font-fs20 font-wb color-green">
              {{item.rcName}}
            </view>
            <view class="d-flex d-flex-aic d-flex-fs0 font-fs14">
              <uv-icon name="checkmark-circle-fill" color="#12b886" size="22" v-if="item.status=='充值成功'"></uv-icon>
              <uv-icon name="question-circle-fill" color="#FF7F27" size="22" v-if="item.status=='充值中'"></uv-icon>
              <uv-icon name="close-circle-fill" color="#ED1C24" size="22" v-if="item.status=='充值失败'"></uv-icon>
              <view class="color-deepGrey ml-small">
                {{item.status}}
              </view>
            </view>
          </view>
          <view class="font-fs14 mt-2 color-grey text-ellipsis">
            订单号: {{item.outTradeNo}}
          </view>
          <view class="font-fs14 mt-2 color-grey" v-if="item.createTime">
            充值时间: {{item.createTime.slice(0,10)}}
          </view>
        </view>

      </view>
    </view>
  </view>

  <uv-button class="mb-normal" style="width: 100%;" v-if="!loading && total > pageNum * 10" type="success" text="查看更多"
    @click="handleMore"></uv-button>
</template>

<style lang="scss" scoped>
  .bg-grey {
    background-color: #f5f5f5;
  }

  .mt-2 {
    margin-top: 2px;
  }

  .color-grey {
    color: #9c9a9b;
  }

  .color-deepGrey {
    color: #666666;
  }

  .color-green {
    color: #12b886;
  }

  .border-r {
    border-radius: 8px;
    overflow: hidden;
  }
</style>